<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<image src="/static/tabbar/返回.png" class="nav-icon"></image>
				</view>
				<text class="nav-title">选择城市</text>
				<view class="nav-right">
					<image src="/static/my/示警.png" class="nav-icon"></image>
				</view>
			</view>
		</view>

		<!-- 当前定位 -->
		<view class="current-location-section">
			<view class="current-location-header">
				<text class="current-location-label">当前定位:</text>
			</view>
			<view class="current-location-content">
				<text class="current-city">{{ currentCity }}</text>
				<view class="relocate-section" @click="onRelocate">
					<image src="/static/index/刷新 (1).png" class="relocate-icon"></image>
					<text class="relocate-text">重新定位</text>
				</view>
			</view>
		</view>

		<!-- 热门城市 -->
		<view class="popular-cities-section">
			<view class="section-title">
				<text class="title-text">热门城市</text>
			</view>
			<view class="cities-grid">
				<view 
					class="city-item" 
					v-for="city in popularCities" 
					:key="city.id"
					@click="selectCity(city)"
				>
					<text class="city-name">{{ city.name }}</text>
				</view>
			</view>
		</view>

		<!-- 城市列表 -->
		<view class="cities-list-section">
			<view 
				class="city-group" 
				v-for="(group, letter) in citiesByLetter" 
				:key="letter"
			>
				<view class="group-header">
					<text class="group-letter">{{ letter }}</text>
				</view>
				<view class="group-cities">
					<view 
						class="city-list-item" 
						v-for="city in group" 
						:key="city.id"
						@click="selectCity(city)"
					>
						<text class="city-list-name">{{ city.name }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentCity: '焦作市',
				// 热门城市数据
				popularCities: [
					{ id: 1, name: '北京市', latitude: 39.9042, longitude: 116.4074 },
					{ id: 2, name: '上海市', latitude: 31.2304, longitude: 121.4737 },
					{ id: 3, name: '广州市', latitude: 23.1291, longitude: 113.2644 },
					{ id: 4, name: '深圳市', latitude: 22.5431, longitude: 114.0579 },
					{ id: 5, name: '杭州市', latitude: 30.2741, longitude: 120.1551 },
					{ id: 6, name: '南京市', latitude: 32.0603, longitude: 118.7969 },
					{ id: 7, name: '武汉市', latitude: 30.5928, longitude: 114.3055 },
					{ id: 8, name: '成都市', latitude: 30.5728, longitude: 104.0668 },
					{ id: 9, name: '西安市', latitude: 34.3416, longitude: 108.9398 }
				],
				// 按字母分组的城市数据
				citiesByLetter: {
					'A': [
						{ id: 101, name: '安庆市', latitude: 30.5255, longitude: 117.0435 },
						{ id: 102, name: '安阳市', latitude: 36.1034, longitude: 114.3525 },
						{ id: 103, name: '安顺市', latitude: 26.2454, longitude: 105.9322 },
						{ id: 104, name: '鞍山市', latitude: 41.1086, longitude: 122.9945 },
						{ id: 105, name: '安康市', latitude: 32.6903, longitude: 109.0293 }
					],
					'B': [
						{ id: 201, name: '北京市', latitude: 39.9042, longitude: 116.4074 },
						{ id: 202, name: '保定市', latitude: 38.8510, longitude: 115.4648 },
						{ id: 203, name: '包头市', latitude: 40.6562, longitude: 109.9535 },
						{ id: 204, name: '蚌埠市', latitude: 32.9507, longitude: 117.3632 },
						{ id: 205, name: '宝鸡市', latitude: 34.3640, longitude: 107.1826 }
					],
					'C': [
						{ id: 301, name: '长沙市', latitude: 28.2278, longitude: 112.9388 },
						{ id: 302, name: '成都市', latitude: 30.5728, longitude: 104.0668 },
						{ id: 303, name: '重庆市', latitude: 29.4316, longitude: 106.9123 },
						{ id: 304, name: '长春市', latitude: 43.8171, longitude: 125.3235 },
						{ id: 305, name: '常州市', latitude: 31.7720, longitude: 119.9469 }
					],
					'D': [
						{ id: 401, name: '大连市', latitude: 38.9140, longitude: 121.6147 },
						{ id: 402, name: '东莞市', latitude: 23.0205, longitude: 113.7518 },
						{ id: 403, name: '大同市', latitude: 40.0768, longitude: 113.3001 },
						{ id: 404, name: '德阳市', latitude: 31.1269, longitude: 104.3987 },
						{ id: 405, name: '东营市', latitude: 37.4342, longitude: 118.6748 }
					],
					'F': [
						{ id: 501, name: '福州市', latitude: 26.0745, longitude: 119.2965 },
						{ id: 502, name: '佛山市', latitude: 23.0215, longitude: 113.1219 },
						{ id: 503, name: '抚顺市', latitude: 41.8809, longitude: 123.9572 },
						{ id: 504, name: '阜阳市', latitude: 32.8969, longitude: 115.8197 },
						{ id: 505, name: '抚州市', latitude: 27.9838, longitude: 116.3584 }
					],
					'G': [
						{ id: 601, name: '广州市', latitude: 23.1291, longitude: 113.2644 },
						{ id: 602, name: '贵阳市', latitude: 26.6470, longitude: 106.6302 },
						{ id: 603, name: '桂林市', latitude: 25.2342, longitude: 110.1992 },
						{ id: 604, name: '赣州市', latitude: 25.8311, longitude: 114.9403 },
						{ id: 605, name: '广元市', latitude: 32.4355, longitude: 105.8434 }
					],
					'H': [
						{ id: 701, name: '杭州市', latitude: 30.2741, longitude: 120.1551 },
						{ id: 702, name: '合肥市', latitude: 31.8206, longitude: 117.2272 },
						{ id: 703, name: '哈尔滨市', latitude: 45.7732, longitude: 126.6617 },
						{ id: 704, name: '海口市', latitude: 20.0444, longitude: 110.1992 },
						{ id: 705, name: '邯郸市', latitude: 36.6113, longitude: 114.5389 }
					],
					'J': [
						{ id: 801, name: '济南市', latitude: 36.6512, longitude: 117.1201 },
						{ id: 802, name: '焦作市', latitude: 35.2159, longitude: 113.2418 },
						{ id: 803, name: '嘉兴市', latitude: 30.7462, longitude: 120.7555 },
						{ id: 804, name: '江门市', latitude: 22.5787, longitude: 113.0819 },
						{ id: 805, name: '九江市', latitude: 29.7051, longitude: 116.0019 }
					],
					'K': [
						{ id: 901, name: '昆明市', latitude: 25.0389, longitude: 102.7183 },
						{ id: 902, name: '开封市', latitude: 34.7971, longitude: 114.3074 },
						{ id: 903, name: '克拉玛依市', latitude: 45.5889, longitude: 84.8889 },
						{ id: 904, name: '库尔勒市', latitude: 41.7269, longitude: 86.1289 },
						{ id: 905, name: '喀什市', latitude: 39.4704, longitude: 75.9891 }
					],
					'L': [
						{ id: 1001, name: '兰州市', latitude: 36.0611, longitude: 103.8343 },
						{ id: 1002, name: '洛阳市', latitude: 34.6197, longitude: 112.4540 },
						{ id: 1003, name: '柳州市', latitude: 24.3146, longitude: 109.4281 },
						{ id: 1004, name: '连云港市', latitude: 34.5969, longitude: 119.1788 },
						{ id: 1005, name: '乐山市', latitude: 29.5518, longitude: 103.7657 }
					],
					'M': [
						{ id: 1101, name: '南京市', latitude: 32.0603, longitude: 118.7969 },
						{ id: 1102, name: '绵阳市', latitude: 31.4675, longitude: 104.6791 },
						{ id: 1103, name: '马鞍山市', latitude: 31.6894, longitude: 118.5079 },
						{ id: 1104, name: '茂名市', latitude: 21.6629, longitude: 110.9192 },
						{ id: 1105, name: '眉山市', latitude: 30.0483, longitude: 103.8317 }
					],
					'N': [
						{ id: 1201, name: '南昌市', latitude: 28.6820, longitude: 115.8579 },
						{ id: 1202, name: '南宁市', latitude: 22.8170, longitude: 108.3669 },
						{ id: 1203, name: '宁波市', latitude: 29.8683, longitude: 121.5440 },
						{ id: 1204, name: '南充市', latitude: 30.8373, longitude: 106.1107 },
						{ id: 1205, name: '南通市', latitude: 32.0103, longitude: 120.8644 }
					],
					'Q': [
						{ id: 1301, name: '青岛市', latitude: 36.0671, longitude: 120.3826 },
						{ id: 1302, name: '泉州市', latitude: 24.8739, longitude: 118.5819 },
						{ id: 1303, name: '秦皇岛市', latitude: 39.9354, longitude: 119.6005 },
						{ id: 1304, name: '齐齐哈尔市', latitude: 47.3543, longitude: 123.9182 },
						{ id: 1305, name: '曲靖市', latitude: 25.5016, longitude: 103.7962 }
					],
					'S': [
						{ id: 1401, name: '上海市', latitude: 31.2304, longitude: 121.4737 },
						{ id: 1402, name: '深圳市', latitude: 22.5431, longitude: 114.0579 },
						{ id: 1403, name: '苏州市', latitude: 31.2989, longitude: 120.5853 },
						{ id: 1404, name: '石家庄市', latitude: 38.0428, longitude: 114.5149 },
						{ id: 1405, name: '沈阳市', latitude: 41.8057, longitude: 123.4315 }
					],
					'T': [
						{ id: 1501, name: '天津市', latitude: 39.3434, longitude: 117.3616 },
						{ id: 1502, name: '太原市', latitude: 37.8706, longitude: 112.5489 },
						{ id: 1503, name: '唐山市', latitude: 39.6309, longitude: 118.1802 },
						{ id: 1504, name: '泰安市', latitude: 36.1949, longitude: 117.0889 },
						{ id: 1505, name: '台州市', latitude: 28.6564, longitude: 121.4206 }
					],
					'W': [
						{ id: 1601, name: '武汉市', latitude: 30.5928, longitude: 114.3055 },
						{ id: 1602, name: '无锡市', latitude: 31.4912, longitude: 120.3124 },
						{ id: 1603, name: '温州市', latitude: 28.0006, longitude: 120.6994 },
						{ id: 1604, name: '乌鲁木齐市', latitude: 43.8256, longitude: 87.6168 },
						{ id: 1605, name: '潍坊市', latitude: 36.7069, longitude: 119.1078 }
					],
					'X': [
						{ id: 1701, name: '西安市', latitude: 34.3416, longitude: 108.9398 },
						{ id: 1702, name: '厦门市', latitude: 24.4798, longitude: 118.0819 },
						{ id: 1703, name: '徐州市', latitude: 34.2619, longitude: 117.2841 },
						{ id: 1704, name: '西宁市', latitude: 36.6232, longitude: 101.7782 },
						{ id: 1705, name: '襄阳市', latitude: 32.0089, longitude: 112.1227 }
					],
					'Y': [
						{ id: 1801, name: '银川市', latitude: 38.4872, longitude: 106.2309 },
						{ id: 1802, name: '扬州市', latitude: 32.3932, longitude: 119.4213 },
						{ id: 1803, name: '烟台市', latitude: 37.4638, longitude: 121.4479 },
						{ id: 1804, name: '宜昌市', latitude: 30.7026, longitude: 111.2865 },
						{ id: 1805, name: '盐城市', latitude: 33.3495, longitude: 120.1614 }
					],
					'Z': [
						{ id: 1901, name: '郑州市', latitude: 34.7466, longitude: 113.6254 },
						{ id: 1902, name: '珠海市', latitude: 22.2707, longitude: 113.5767 },
						{ id: 1903, name: '镇江市', latitude: 32.2044, longitude: 119.4528 },
						{ id: 1904, name: '淄博市', latitude: 36.8131, longitude: 118.0549 },
						{ id: 1905, name: '张家口市', latitude: 40.8244, longitude: 114.8875 }
					]
				}
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 重新定位
			onRelocate() {
				uni.showLoading({
					title: '正在重新定位...'
				});
				// 模拟重新定位
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '定位成功',
						icon: 'success'
					});
				}, 1500);
			},
			// 选择城市
			selectCity(city) {
				console.log('选择城市:', city);
				// 将选择的城市信息存储到本地存储
				const selectedCity = {
					address: city.name,
					latitude: city.latitude,
					longitude: city.longitude
				};
				uni.setStorageSync('selectedCity', selectedCity);
				
				// 显示选择成功提示
				uni.showToast({
					title: `已选择${city.name}`,
					icon: 'success',
					duration: 1500
				});
				
				// 延迟返回上一页，让用户看到提示
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(135deg, #3183FB 0%, #3183FB 100%);
		padding-top: var(--status-bar-height);
	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx 30rpx;
	}

	.nav-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.nav-title {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
		flex: 1;
		text-align: center;
	}

	/* 当前定位 */
	.current-location-section {
		background-color: white;
		padding: 30rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.current-location-header {
		margin-bottom: 20rpx;
	}

	.current-location-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.current-location-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.current-city {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.relocate-section {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.relocate-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.relocate-text {
		font-size: 24rpx;
		color: #666;
	}

	/* 热门城市 */
	.popular-cities-section {
		background-color: white;
		margin: 0 20rpx 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.section-title {
		margin-bottom: 30rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.cities-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
	}

	.city-item {
		background-color: #f8f9fa;
		padding: 20rpx;
		border-radius: 15rpx;
		text-align: center;
		transition: all 0.3s ease;
	}

	.city-item:active {
		background-color: #e9ecef;
		transform: scale(0.98);
	}

	.city-name {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	/* 城市列表 */
	.cities-list-section {
		background-color: white;
		margin: 0 20rpx 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.city-group {
		border-bottom: 1rpx solid #f0f0f0;
	}

	.city-group:last-child {
		border-bottom: none;
	}

	.group-header {
		background-color: #f8f9fa;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #e9ecef;
	}

	.group-letter {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.group-cities {
		background-color: white;
	}

	.city-list-item {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		transition: background-color 0.3s ease;
	}

	.city-list-item:last-child {
		border-bottom: none;
	}

	.city-list-item:active {
		background-color: #f8f9fa;
	}

	.city-list-name {
		font-size: 28rpx;
		color: #333;
	}
</style>
